<template>
  <div>
    <!-- 顶部导航栏 -->
    <van-tabs v-model="active">
      <van-tab title="全部订单">

    <!-- 1.订单详情 -->
    <van-swipe-cell>
      <van-card
       @click="wm"
       num="1"
       price="80.00"
       desc="1次"
       title="上门喂猫服务"
       class="goods-card"
       thumb="http://picture.ik123.com/uploads/allimg/170818/12-1FQQ45014.jpg"/>
      <template #right>
    <van-button square text="删除" type="danger" class="delete-button" />
  </template>
</van-swipe-cell>

    <!-- 2.订单详情 -->
    <van-swipe-cell>
      <van-card
       @click="lg"
       num="1"
       price="100.00"
       desc="1次"
       title="上门遛狗服务"
       class="goods-card"
       thumb="http://pic.uuhy.com/uploads/2014/05/23/19-Cute-Puppies.jpg"/>
      <template #right>
    <van-button square text="删除" type="danger" class="delete-button" />
  </template>
</van-swipe-cell>

    <!-- 3.订单详情 -->
    <van-swipe-cell>
      <van-card
       @click="wm2"
       num="1"
       price="80.00"
       desc="1次"
       title="上门遛猫服务"
       class="goods-card"
       thumb="http://pic.qqtn.com/up/2017-7/2017070615385277399.jpg"/>
      <template #right>
    <van-button square text="删除" type="danger" class="delete-button" />
  </template>
</van-swipe-cell>
      
      <!-- 4.订单详情 -->
      <van-swipe-cell>
        <van-card
         @click="wm3"
         num="1"
         price="80.00"
         desc="1次"
         title="上门遛猫服务"
         class="goods-card"
         thumb="http://photocdn.sohu.com/20110315/Img304353869.jpg"/>
      <template #right>
    <van-button square text="删除" type="danger" class="delete-button" />
  </template>
</van-swipe-cell>

        <!-- 5.订单详情 -->
        <van-swipe-cell>
         <van-card
          @click="wm4"
          num="2"
          price="160.00"
          desc="1次"
          title="上门遛猫服务"
          class="goods-card"
          thumb="http://img.2qqtouxiang.com/pic/TP9791_28.jpg"/>
      <template #right>
    <van-button square text="删除" type="danger" class="delete-button" />
  </template>
</van-swipe-cell>
</van-tab>

      <van-tab title="进行中">
        <!-- 3.订单详情 -->
    <van-swipe-cell>
      <van-card
       @click="wm2"
       num="1"
       price="80.00"
       desc="1次"
       title="上门遛猫服务"
       class="goods-card"
       thumb="http://pic.qqtn.com/up/2017-7/2017070615385277399.jpg"/>
      <template #right>
    <van-button square text="删除" type="danger" class="delete-button" />
  </template>
</van-swipe-cell>
      </van-tab>

      <van-tab title="已完成">
        <!-- 5.订单详情 -->
        <van-swipe-cell>
         <van-card
          @click="wm4"
          num="2"
          price="160.00"
          desc="1次"
          title="上门遛猫服务"
          class="goods-card"
          thumb="http://img.2qqtouxiang.com/pic/TP9791_28.jpg"/>
      <template #right>
    <van-button square text="删除" type="danger" class="delete-button" />
  </template>
</van-swipe-cell>
</van-tab>

      <van-tab title="取消/退款">
      <van-empty description="暂时还没有该类型的订单"/>
      </van-tab>
    </van-tabs>

    <my-footer/>
  </div>
</template>
<script>
import MyFooter from '@/components/MyFooter.vue'
import router from '@/router'

export default{
  data() {
    return {
      active: 0
    }
  },
  methods:{
    wm(){
      this.$router.push('/weimao')
    },
    wm2(){
      this.$router.push('/weimao')
    },
    wm3(){
      this.$router.push('/weimao')
    },
    wm4(){
      this.$router.push('/weimao')
    },
    lg(){
      this.$router.push('/liugou')
    }
  },
  name:'order',
  components:{MyFooter},
}
</script>
<style lang="scss" scoped>

</style>
<style lang="scss">
 .van-tabs__line {
  background-color: #f8e176;
 }
 .goods-card{
   margin: 0;
 }
  .delete-button {
    height: 100%;
  }
  .van-card{
    color: #1c1c1c;
    font-size: 15px;
  }
  .van-card__desc{
    color: #e25a64;
  }
  
</style>